<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>流浪书屋--购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css">
		<script type="text/javascript">
			var t;
			function change(t){
				var amount = document.getElementById("amount"+t);
				var bookPrice=document.getElementById("bookPrice"+t);
			
				if(amount.value.length==0||amount.value.match(/^[0-9]*[1-9][0-9]*$/)==null){
					document.getElementById("show").innerHTML="商品数量不能为空，且必须为正整数";	
					alert("商品数量不能为空，且必须为正整数");
				}
				else{
					document.getElementById("sum"+t).value=(bookPrice.value*amount.value*1).toFixed(2);
					var j=document.getElementById("j").value;
					var total=document.getElementById("total");
					var memberTotal=document.getElementById("memberTotal");
					memberTotal.value=0*1;
					total.value=0*1;
					for(var q =0;q<j;q++){
						total.value=(total.value*1+document.getElementById("sum"+q).value*1).toFixed(2);
						memberTotal.value=(memberTotal.value*1+ document.getElementById("memberPrice"+q).value*document.getElementById("amount"+q).value*1).toFixed(2);
					}			
					document.getElementById("save").value=(total.value-memberTotal.value).toFixed(2);
				}
			}
			function submit(){
				document.getElementById("form1").submit();
			}
			function submitToOrder(){
				document.getElementById("toOrder").value="changeToOrder";
				document.getElementById("form1").submit();	
			}
			
		</script>
	</head>
	<body>
		<%@  include file="top.jsp"%>
		<div id="MIDDLE">
			<!--左侧-->

			<!-- 右侧 -->
			<div id="RIGHT">
				<div
					style="width: 980px; float: left; text-align: center; height: 35px; font-size: 22px; vercial-align: middle; line-height: 35px;">
					流浪书屋--购物车
				</div>
				<table width="800px" border="0">
					<tr
						style="height: 35px; font-size: 16px; background-color: #CAE8EA;">
						<th width="20%">
							书名
						</th>
						<th width="15%">
							定价
						</th>
						<c:if test="${not empty member}">
							<th width="15%">
								会员价
							</th>
						</c:if>
						<th width="10%">
							数量
						</th>
						<th width="20%">
							单品总价
						</th>
						<th width="20%">
							操作
						</th>
					</tr>
				</table>
				<c:if test="${empty shoppingcart}">
					<span style="color: red;">购物车为空,请<a
						href="${CONTEXT_ROOT}/SecondServlet?method=list">购买</a>后再查看</span>
				</c:if>
				<form id="form1" action="${CONTEXT_ROOT}/ShoppingCartServlet"
					method="post">
					<input type="hidden" name="method" value="update" />
					<input type="hidden" value="${size}" name="j" id="j" />
					<input type="hidden" value="" name="toOrder" />
					<table width="800px" border="0">
						<c:set var="i" value="0"></c:set>
						<c:forEach items="${shoppingcart.carts}" var="book">
							<tr>
								<td width="20%">
									${book.bookName}
									<input type="hidden" name="bookId" value="${book.bookId}" />
								</td>
								<td width="15%">
									￥
									<input type="text" readonly="readonly" name="bookPrice"
										id="bookPrice${i}"
										value="<fmt:formatNumber
											value='${book.bookPrice}' pattern='.##'/>"
										size="7" style="border: 0; color: #ff0000;" />
								</td>
								<c:if test="${not empty member}">
									<td width="15%">
										￥
										<input type="text" readonly="readonly" name="memberPrice"
											id="memberPrice${i}"
											value="<fmt:formatNumber
											value='${book.memberPrice}' pattern='.##'/>"
											size="7" style="border: 0; color: #ff0000;" />
									</td>
								</c:if>
								<td width="10%">
									<input type="text" name="amount" style="text-align: center"
										value="${book.amount}" id="amount${i}"
										onchange="return change(${i});" size="4" />
								</td>
								<td width="20%">
									￥
									<input type="text" readonly="readonly" name="sum" id="sum${i}"
										value="<fmt:formatNumber
											value='${book.sum}' pattern='.##'/>"
										size="10" style="border: 0; color: #ff0000;" />

								</td>
								<td width="20%">
									<a
										href="${CONTEXT_ROOT}/ShoppingCartServlet?method=del&bookId=${book.bookId}">【取消】</a>&nbsp;&nbsp;
									<a href="#">【收藏】</a>
								</td>
							</tr>
							<c:set var="i" value="${i+1}"></c:set>
						</c:forEach>
					</table>
					<table width="800px" border="0">
						<tr>
							<td>
								商品实际金额：￥
								<input type="text" readonly="readonly" id="total"
									value="<fmt:formatNumber
											value='${shoppingcart.total}' pattern='.##'/>"
									size="15" style="border: 0; color: #ff0000;" />

							</td>
							<td>
								会员支付金额：￥
								<input type="text" readonly="readonly" id="memberTotal"
									value="<fmt:formatNumber
											value='${shoppingcart.memberTotal}' pattern='.##'/>"
									size="15" style="border: 0; color: #ff0000;" />

							</td>
							<td>
								此次交易节省：￥
								<input type="text" readonly="readonly" id="save"
									value="<fmt:formatNumber
											value='${shoppingcart.total-shoppingcart.memberTotal}' pattern='.##'/>"
									size="15" style="border: 0; color: #ff0000;" />

							</td>
						</tr>
						<tr>
							<td colspan="3" align="right">
								<span
									style="margin-right: 50px; color: #ff0000; font-size: 12px;"
									id="show"></span>
								<a href="#" onclick="submit();"><img
										src="${CONTEXT_ROOT}/images/shop_12.gif" border="0" /> </a>
								<a href="#" onclick="submitToOrder();"> <img
										src="${CONTEXT_ROOT}/images/shop_14.gif" border="0" /> </a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<%@  include file="bottom.jsp"%>
	</body>
</html>